<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        window.onload=function(){
            //1.定义组件
            var a={
                template:`
                    <div>
                        <h3>a-list--</h3>
                    </div>
                `
            };
            var b={
                template:`
                    <div>
                        <h3>b-list--</h3>
                    </div>
                `
            };
            var student={
                template:`
                    <div>
                        <h2>student-list--</h2>
                        <router-link to='/a'>aaa</router-link>
                        <router-link to='/b'>bbb</router-link>
                        <router-view></router-view>
                    </div>
                `
            };
            var teacher={
                template:`
                    <div>
                        <h2>teacher-list--</h2>
                    </div>
                `
            };
            //2.定义路由
            var router=new VueRouter({
                routes:[{
                    path:'/student',
                    component:student,
                    children:[{
                        path:'/a',
                        component:a
                    },{
                        path:'/b',
                        component:b
                    }]
                },{
                    path:'/teacher',
                    component:teacher
                }]
            })
            //3.路由挂载
            new Vue({
                el:'#app',
                router
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <router-link to='/student'>student</router-link>
        <router-link to='/teacher'>teacher</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
</body>
</html>